<template>
  <div class="chart-container">
    <div ref="lineCharts" class="w-100% h-400px"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'LineCharts',
})
</script>
<script setup  lang="ts">
import * as echarts from 'echarts';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const lineCharts = ref<any>(null);
let lineChartDom = ref<any>(null);
const props = defineProps<{
  lineData:any,
  name:string,
  type:string
}>()
const {lineData,name,type} = toRefs(props)
const TYPE_MAP:any={
     internet:t('home.internet_label'),
    private_net:t('home.private_net_label'),
    language:t('home.language_label'),
    xwtj:t('home.xwtj_label'),
    caa:t('home.caa_label'),
}
const isFirstData = ref<boolean>(true)
function setLineChartsOption() {
  return {
    backgroundColor: 'transparent',
    title: {
      text: '{decorationBlock|} ' + TYPE_MAP[type.value],
      textStyle: {
        color: '#00AAFF',
        fontSize: 16,
        lineHeight: 16,
        textShadow: '0 0 5px rgba(0, 170, 255, 0.7)',
        rich: {
          decorationBlock: {
            width: 5,
            height: 16,
            backgroundColor: '#38B0D5',
            borderRadius: [0, 0, 0, 0],
            align: 'center',
            padding: [0, 0, 5, 0],
            verticalAlign: 'middle',
            boxShadow: '0 0 5px rgba(56, 176, 213, 0.8)'
          }
        }
      },
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      data: lineData.value.timeList,
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        fontSize: 12,
        color: "#fff",
        textShadow: '0 0 3px rgba(255, 255, 255, 0.3)'
      },
      axisLine: {
        lineStyle: {
          color: "rgba(73,136,253,0.5)",
          shadowColor: 'rgba(73,136,253,0.3)',
          shadowBlur: 5
        },
      }
    },
    yAxis: [
      {
        name: "MB/s",
        type: 'value',
        nameTextStyle: {
          color: "#fff",
          textShadow: '0 0 3px rgba(255, 255, 255, 0.3)'
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: function (value: any) {
            return value
          },
          color: "#fff",
          textShadow: '0 0 3px rgba(255, 255, 255, 0.3)'
        },
        axisLine: { show: false },
        splitLine: { 
          lineStyle: { 
            color: "rgba(255,255,255,0.08)",
            type: 'dashed'
          } 
        },
      }
    ],
    series: Object.keys(lineData.value).filter((item: any) => item !== 'timeList').map((item: any) => {
      // 定义颜色
      const color = item === 'tx_bytes_ps' ? '#00aaff' : '#00e676';
      const shadowColor = item === 'tx_bytes_ps' ? 'rgba(0, 170, 255, 0.8)' : 'rgba(0, 230, 118, 0.8)';
      
      return {
        name: item === 'tx_bytes_ps' ? '发送速率' : '接收速率',
        type: 'line',
        data: lineData.value[item],
        symbol: 'circle',
        symbolSize: 8,
        showSymbol: true,
        smooth: true,
        // 线条样式
        lineStyle: {
          width: 3,
          color: color,
          shadowColor: shadowColor,
          shadowBlur: 10,
          shadowOffsetY: 0,
          cap: 'round'
        },
        // 数据点样式
        itemStyle: {
          color: color,
          borderColor: '#fff',
          borderWidth: 1,
          shadowColor: shadowColor,
          shadowBlur: 10
        },
        // 区域填充
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: item === 'tx_bytes_ps' ? 'rgba(0, 170, 255, 0.3)' : 'rgba(0, 230, 118, 0.3)'
            },
            {
              offset: 1,
              color: item === 'tx_bytes_ps' ? 'rgba(0, 170, 255, 0.05)' : 'rgba(0, 230, 118, 0.05)'
            }
          ])
        },
        // 高亮样式
        emphasis: {
          lineStyle: {
            width: 4,
            shadowBlur: 20
          },
          itemStyle: {
            borderWidth: 2,
            shadowBlur: 20
          }
        },
        z: 2
      }
    }),
    legend: {
      top: '5%',
      icon: "circle",
      left: 'center',
      textStyle: {
        color: '#fff',
        textShadow: '0 0 3px rgba(255, 255, 255, 0.3)'
      },
      itemStyle: {
        shadowBlur: 5,
        shadowColor: 'rgba(255, 255, 255, 0.3)'
      }
    },
    tooltip: {
      trigger: 'axis',
      show: true,
      z: 100,
      enterable: true,
      confine: true,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#38B0D5',
          width: 1,
          shadowColor: 'rgba(56, 176, 213, 0.5)',
          shadowBlur: 5
        }
      },
      backgroundColor: 'rgba(8, 22, 46, 0.85)',
      borderColor: 'rgba(0, 209, 237, 0.3)',
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: '#fff'
      },
      extraCssText: 'backdrop-filter: blur(8px); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 209, 237, 0.2); border-radius: 4px;',
      formatter: function (params: any) {
        if (!params || params.length === 0) return '';
        let html = `<div style="font-weight:bold;margin-bottom:8px;text-shadow:0 0 3px rgba(255,255,255,0.3)">${params[0].axisValue}</div>`;
        params.forEach((item: any) => {
          html += `
        <div style="display:flex;align-items:center;margin:8px 0">
          <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${item.color};margin-right:8px;box-shadow:0 0 5px ${item.color}"></span>
          <span style="flex:1">${item.seriesName}: <span style="font-weight:bold;color:${item.color};text-shadow:0 0 3px rgba(255,255,255,0.3)">${item.value} MB/s</span></span>
        </div>
      `;
        });
        return html
      }
    }
  }
}
function initLineCharts(){
  lineChartDom.value = markRaw(echarts.init(lineCharts.value));
  window.addEventListener('resize',()=>{
    lineChartDom.value.resize()
  })
}
watch(()=>lineData.value,()=>{
  if(isFirstData.value){
    initLineCharts()
    isFirstData.value = false
  }
   
  lineChartDom.value.setOption(setLineChartsOption())
},{
  deep:true
})
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(rgba(73, 136, 253, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(73, 136, 253, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
  }
}
</style>
